<template>
	<view class="content">
		<view class="list">
			<view class="item" @click="handleToDetail">
				<view class="image">
					<image src="/static/n1.png" mode=""></image>
				</view>
				<view class="text">
					<view class="t1">
						<text class="l">系统通知</text>
						<text class="r">2025/01/01 18:23</text>
					</view>
					<view class="t2">
						COACH/蔻驰品牌活动进行中，邀请您参加...
					</view>
				</view>
			</view>
			
			<view class="item">
				<view class="image">
					<image src="/static/n2.png" mode=""></image>
				</view>
				<view class="text">
					<view class="t1">
						<text class="l">通知消息</text>
						<text class="r">2025/01/01 18:23</text>
					</view>
					<view class="t2">
						COACH/蔻驰品牌活动进行中，邀请您参加...
					</view>
				</view>
			</view>
			
			<view class="item">
				<view class="image">
					<image src="/static/n3.png" mode=""></image>
				</view>
				<view class="text">
					<view class="t1">
						<text class="l">发货通知</text>
						<text class="r">2025/01/01 18:23</text>
					</view>
					<view class="t2">
						您购买的商品已发货
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo 
			}
		},
		onLoad() {
			this.getList()
		},
		methods:{
			getList(){
				this.$http({
					url:"/umsNotifyDetail/paginQuery",
					method:"get",
					data:{
						memberId:this.userInfo.id,
						msgId:1,
						state:0,
						pageSize:1,
						pageNum:10
					}
				})
			},
			handleToDetail(){
				uni.navigateTo({
					url:"./detail"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 30rpx;
		.list{
			.item{
				display: flex;
				align-items: center;
				margin-bottom: 56rpx;
				.text{
					flex: 1;
					margin-left: 24rpx;
					.t1{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.l{
							font-size: 28rpx;
							color: #020202;
							font-weight: bold;
						}
						.r{
							font-size: 24rpx;
							color: #D7D7D7;
						}
					}
					.t2{
						font-size: 24rpx;
						color: #999999;
						margin-top: 12rpx;
					}
				}
				.image{
					width: 88rpx;
					height: 88rpx;
					image{
						width: 88rpx;
						height: 88rpx;
						display: block;
					}
				}
			}
		}
	}
</style>